<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/animate.css">
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./font/iconfont.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" media="screen and (max-width:768px)" href="./css/mobile.css" />
  <style>
    .my-map { margin: 0; width: 50%; height: 356px; } .my-map .icon { background: url(//a.amap.com/lbs-dev-yuntu/static/web/image/tools/creater/marker.png) no-repeat; } .my-map .icon-cir { height: 31px; width: 28px; } .my-map .icon-cir-red { background-position: -11px -5px; } .my-map .icon-cir { height: 31px; width: 28px; } .my-map .icon-cir-blue { background-position: -11px -55px; }
    .amap-container{height: 100%;}
    .myinfowindow{width: 240px;min-height: 50px;}
    .myinfowindow h5{ height: 20px; line-height: 20px; overflow: hidden; font-size: 14px; font-weight: bold; width: 220px; text-overflow: ellipsis; word-break: break-all; white-space: nowrap; }
    .myinfowindow div{ margin-top: 10px; min-height: 40px; line-height: 20px; font-size: 13px; color: #6f6f6f; }
  </style>
  <title>联系我们</title>
</head>
<body>
  @@include('@@webRoot/components/header.tpl')
  <div class="technologybaner">
    <div class="bg_color"></div>
    <div class="bg_img"
      style="background-image: url(http://p.cdn-static.cn/61962_16494788561233.png?imageView2/2/w/2000/q/75);"></div>
    <div class="more">
      <a href="">探索更多 << </a>
    </div>
  </div>
  <div class="zcontainerain signcontactus">
    <div id="wrap" class="my-map">
      <div id="mapContainer"></div>
    </div>
    <div class="mapcontent">
      <h3>方太文化研究院</h3>
      <p>地址： 浙江省宁波市杭州湾新区 滨海六路 1266号 方太理想城</p>
      <div class="wimgs">
        <img src="http://p.cdn-static.cn/61962_16493086995782.png?imageView2/2/w/247/q/75" alt="">
        <h4>课程咨询</h4>
      </div>
    </div>
  </div>
  @@include('@@webRoot/components/footer.tpl')
  @@include('@@webRoot/components/goTop.tpl')
  <script src="./js/jquery-3.5.1.min.js"></script>
  <script src="./js/common.js"></script>
  <script src="//webapi.amap.com/maps?v=1.3&key=ba4b327fb7e25b31e402123910040cb0"></script>
    <script>
      !function () {
        var infoWindow, map, level = 16,
          center = { lng: 121.221596, lat: 30.341854 },
          features = [{ "icon": "cir", "color": "red", "name": "未命名标注", "desc": "未命名标注描述", "lnglat": { "Q": 30.34185381573693, "R": 121.22199275314807, "lng": 121.221993, "lat": 30.341854 }, "offset": { "x": -9, "y": -31 }, "type": "Marker" }, { "icon": "cir", "color": "blue", "name": " 方太文化研究院", "desc": "地址:浙江省宁波市杭州湾新区 滨海六路 1266号 方太理想城", "lnglat": { "Q": 30.34185381573693, "R": 121.22199275314807, "lng": 121.221993, "lat": 30.341854 }, "offset": { "x": -9, "y": -31 }, "type": "Marker" }];

        function loadFeatures() {
          for (var feature, data, i = 0, len = features.length, j, jl, path; i < len; i++) {
            data = features[i];
            switch (data.type) {
              case "Marker":
                feature = new AMap.Marker({
                  map: map, position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
                  zIndex: 3, extData: data, offset: new AMap.Pixel(data.offset.x, data.offset.y), title: data.name,
                  content: '<div class="icon icon-' + data.icon + ' icon-' + data.icon + '-' + data.color + '"></div>'
                });
                break;
              case "Polyline":
                for (j = 0, jl = data.path.length, path = []; j < jl; j++) {
                  path.push(new AMap.LngLat(data.path[j].lng, data.path[j].lat));
                }
                feature = new AMap.Polyline({
                  map: map, path: path, extData: data, zIndex: 2,
                  strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity
                });
                break;
              case "Polygon":
                for (j = 0, jl = data.path.length, path = []; j < jl; j++) {
                  path.push(new AMap.LngLat(data.path[j].lng, data.path[j].lat));
                }
                feature = new AMap.Polygon({
                  map: map, path: path, extData: data, zIndex: 1,
                  strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity,
                  fillColor: data.fillColor, fillOpacity: data.fillOpacity
                });
                break;
              default: feature = null;
            }
            if (feature) { AMap.event.addListener(feature, "click", mapFeatureClick); }
          }
        }

        function mapFeatureClick(e) {
          if (!infoWindow) { infoWindow = new AMap.InfoWindow({ autoMove: true, isCustom: false }); }
          var extData = e.target.getExtData();
          infoWindow.setContent("<div class='myinfowindow'><h5>" + extData.name + "</h5><div>" + extData.desc + "</div></div>");
          infoWindow.open(map, e.lnglat);
        }

        map = new AMap.Map("mapContainer", { center: new AMap.LngLat(center.lng, center.lat), level: level, keyboardEnable: true, dragEnable: true, scrollWheel: true, doubleClickZoom: true });

        loadFeatures();

        map.on('complete', function () {
          map.plugin(["AMap.ToolBar", "AMap.OverView", "AMap.Scale"], function () {
            map.addControl(new AMap.ToolBar({ ruler: true, direction: true, locate: false })); map.addControl(new AMap.OverView({ isOpen: true })); map.addControl(new AMap.Scale);
          });
        })

      }();
    </script>
</body>
</html>